<template>
  <div>
    <h2 align="center">用户登录列表页面</h2>
    <table class="table table-bordered">
      <tr>
        <td>账号ID</td>
        <td>用户名</td>
        <td>密码</td>
      </tr>

      <tr v-for="item in list" :key="item.U_Id">
        <td>{{ item.U_Id }}</td>
        <td>{{ item.U_Name }}</td>
        <td>{{ item.U_Pwd.substr(0,4)+'***' }}</td>
      </tr>
    </table>
  </div>
</template>

<script setup lang="ts">

import {reactive,toRefs,onMounted} from 'vue'

import axios from 'axios';

import {useRoute,useRouter} from 'vue-router'

let route = useRoute()
let router = useRouter()

//数据
let data:any = reactive({
  //登录数据
  list:[]
})

//解构
let {list} = toRefs(data)

//生命周期函数
onMounted(()=>{
  showInfo()
})

//显示数据
const showInfo =()=>{
  axios({
    url:'/api/User/ShowUserList',
    method:'get',
  }).then(res=>{
    console.log(res);
    list.value=res.data.data
  }).catch(err=>{
    console.log(err);
  })
}

</script>

<style scoped>

</style>